<template>
  <div>
    <div
      style="
        background-color: rgb(239, 239, 244);
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      "
    >
      <div style="display: flex">
        <div>
          <img
            src="../../assets/img/xiaoshou007.png"
            alt=""
            style="width: 75px; height: 60px; margin-left: 10px"
          />
        </div>
        <div style="font-size: 20px; margin-left: 10px; margin-top: 20px">
          流程:创建 - 采购需求申请单 - 创建
        </div>
      </div>
      <div style="display: flex; align-items: center">
        <div>
          <el-button type="primary" size="mini" @click="submit()">提交</el-button>
        </div>
        <div style="margin-left: 20px">
          <el-button type="primary" size="mini">保存</el-button>
        </div>
        <div>
          <div>
            <img
              src="../../assets/img/sq.png"
              alt=""
              style="
                background-color: rgb(200, 200, 200);
                margin-top: 4px;
                margin-left: 20px;
                margin-right: 10px;
              "
            />
          </div>
        </div>
      </div>
    </div>
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="需求申请" name="first">
          <div style="width: 80%; margin: 0 auto; margin-top: 10px">
            <div
              style="
                width: 100%;
                height: 50px;
                font-size: 24px;
                text-align: center;
                line-height: 50px;
              "
            >
              采购需求清单
            </div>
            <div
              style="
                width: 100%;
                height: 30px;
                font-size: 10px;
                text-align: center;
                line-height: 30px;
              "
            >
              Seal application form
            </div>
          </div>
          <hr />
          <div
            style="
              font-size: 20px;
              color: rgb(43, 106, 201);
              background-color: rgb(239, 239, 244);
              height: 40px;
              line-height: 40px;
              margin-top: 20px;
              width: 96%;
              margin: 0 auto;
              margin-bottom: 20px;
            "
          >
            | 基本信息
          </div>
          <div style="width: 96%; margin: 0 auto">
            <el-form ref="form" :model="form" label-width="100px">
              <el-form-item label="编号">
                <el-input v-model="form.number"></el-input>
              </el-form-item>
              <el-form-item label="关联">
                <el-input v-model="form.relatedTo"></el-input>
              </el-form-item>
              <el-form-item label="创建时间">
                <el-date-picker
                  v-model="form.creationTime"
                  type="date"
                  placeholder="创建时间"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="申请部门">
                <el-input v-model="form.initiatingDepartment"></el-input>
              </el-form-item>
              <el-form-item label="填报人">
                <el-input v-model="form.filler"></el-input>
              </el-form-item>
              <el-form-item label="填报时间">
                <el-date-picker
                  v-model="form.fillingTime"
                  type="date"
                  placeholder="填报时间"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="物品名称">
                <el-input v-model="form.itemName"></el-input>
              </el-form-item>
              <el-form-item label="需求数量">
                <el-input v-model="form.requiredQuantity"></el-input>
              </el-form-item>
              <el-form-item label="期望到货时间">
                <el-date-picker
                  v-model="form.expectedArrivalTime"
                  type="date"
                  placeholder="期望到货时间"
                >
                </el-date-picker>
              </el-form-item>
            </el-form>
          </div>
          <hr />
        </el-tab-pane>
        <el-tab-pane label="查看表单" name="second">
          <el-table :data="requireData" style="width: 100%">
            <el-table-column prop="number" label="编号" width="160">
            </el-table-column>
            <el-table-column prop="relation" label="关联" width="110">
            </el-table-column>
            <el-table-column prop="time1" label="创建时间" width="120"> </el-table-column>
            <el-table-column prop="department" label="发起部门" width="130">
            </el-table-column>
            <el-table-column prop="people" label="填报人" width="140">
            </el-table-column>
            <el-table-column prop="time2" label="填报时间" width="150"> </el-table-column>
            <el-table-column prop="name" label="物品名称" width="160">
            </el-table-column>
            <el-table-column prop="count" label="需求数量" width="110">
            </el-table-column>
            <el-table-column prop="time3" label="期望到货时间" width="180"> </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import { addPurchaseRequirements } from "../../api/sales"
export default {
  data() {
    return {
      form: {
        number: "",
        relatedTo: "",
        creationTime: "",
        initiatingDepartment: "",
        filler: "",
        fillingTime: "",
        itemName: "",
        requiredQuantity: "",
        expectedArrivalTime: "",
      },
      active: 0,
      activeName:"first",
    };
  },
  methods: {
    submit() {
      const newForm = {
        number: this.form.number,
        relatedTo: this.form.relatedTo,
        creationTime: moment(this.form.creationTime).format('YYYY-MM-DD'),
        initiatingDepartment: this.form.initiatingDepartment,
        filler: this.form.filler,
        fillingTime: moment(this.form.fillingTime).format('YYYY-MM-DD'),
        itemName: this.form.itemName,
        requiredQuantity: this.form.requiredQuantity,
        expectedArrivalTime: moment(this.form.expectedArrivalTime).format('YYYY-MM-DD'),
      }
      console.log(newForm);
      addPurchaseRequirements(newForm).then((res) => {
        if(res.code == 200){
          console.log(res);
            this.form.number = null,
            this.form.relatedTo = null,
            this.form.creationTime = null,
            this.form.initiatingDepartment = null,
            this.form.filler = null,
            this.form.fillingTime = null,
            this.form.itemName = null,
            this.form.requiredQuantity = null,
            this.form.expectedArrivalTime = null,
            this.$message({
              message: '新增成功',
              type: 'success'
            });
        }
        
      });
    }
  }
};
</script>

<style>
</style>